<template>
  <div class="beijin">
      <div class="daohan">
        <ul class="daohan2">
          <span class="loog"><div style="height:20px"></div>每日一看</span>
          <span class="shuosuo"><input type="text" placeholder="" class="shuosuokuan"><a href="#" class="caolianjie"><br> 搜索(未完成)</a></span>
        </ul> 
      </div>
      <myHeader1></myHeader1>
  </div>
</template>

<script>
import myHeader1 from './Header1.vue'
export default {
  name:'myHeader',
  components:{myHeader1}
}
</script>

<style scoped>

   .daohan{
    position: absolute;
    text-align: center;
    margin: 0 auto;
    width: 100%;
    height: 80px;
    
   }
   .daohan2{
    text-align: center;
    margin: 0 auto;
    width: 1000px;
    height: 75px;
    
   }
   .loog,.shuosuo{
    display: inline-block;
   }
   .loog{
    position: absolute;
    left: 200px;
    width: 200px;
    height: 75px;
    font: italic 700 30px 微软雅黑;
    box-shadow: 10px 10px 5px rgba(0,0,0,0.5);
   }
   .loog:hover{
    background-color: rgba(255,255,255,0.1);
   }
   .shuosuo{
    position:absolute;
    right:0px;
    margin: 0 auto;
    width: 500px;
    height: 75px;
    box-shadow: 10px 10px 5px rgba(0,0,0,0.2);
   }
   /* .shuosuo:hover{
    background-color: rgba(255,255,255,0.1);
   } */
   .shuosuokuan{
    background: none;
    border: 0px;
    width: 90%;
    height: 95%;
   }
   .shuosuokuan:hover{
    background-color:rgba(255,255,255,0.1) ;
   }
   .caolianjie{
    display: inline-block;
    
    height: 75px;
    text-decoration: none;
   }
   .beijin{
    width: 100%;
    height: 1080px;
    background-size: 100% 100%;
    background-image: url(https://gd-hbimg.huaban.com/da99d43ae4a7f1d78c7bfbceb18e689a7a3acd3d5e181e-6VlHEp) ;
   }
   /* .caolianjie:hover{
    background-color:rgba(255,255,255,0.1) ;
   } */
   
</style>